<template>
    <div class="page-wrapper">
        <!-- 头部信息 -->
        <Row>
            <Col :xs="24">
            <div class="margin-up-down four">
                <Button type="info" @click="addSupply" style="width:51px;height:35px;">
                    <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
                </Button>
            </div>
            <div class="margin-up-down">
                <newfourLevelLinkage
                @changeProvince="(val) => {filterObj.provinceCode = val;}"
                @changeCity="(val) => {filterObj.cityCode = val;}"
                @changeArea="(val) => {filterObj.districtCode = val;}"
                :province="filterObj.provinceCode"
                :city="filterObj.cityCode"
                :area="filterObj.districtCode"
                ></newfourLevelLinkage>
            </div>
            <div class="margin-up-down">
                <Input v-model="filterObj.name" class='one' placeholder="供应商名称"/>
            </div>
            <div class="margin-up-down">
                <Select v-model="filterObj.enable" :key="filterObj" class='two' placeholder="合作状态">
                    <Option value="all" key="all">全部</Option>
                    <Option v-for="item in enableList" :value="item.dictValue" :key="item.dictValue">{{ item.dictName }}</Option>
                </Select>
            </div>
            <div class="margin-up-down">
                <Button style="width:51px;height:35px;" type="primary" class='three'  @click="handleSearch" icon="ios-search"></Button>
                <Button style="width:51px;height:35px;" class='three'   @click="handleReset">
                    <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>
                </Button>
            </div>
        </Col>
        </Row>
        <!-- 列表 -->
        <div class="page">
            <Table border stripe :columns="columns" :data="dataList"></Table>
        </div>
        <!--分页器-->
        <div class="page">
            <Page :total="pagination.count" :current='pagination.pageNo' :page-size="pagination.pageSize" show-total show-elevator @on-change="onChange"/>
        </div>
        <Modal title="确认删除弹窗"
            v-model="reviewYesStatus"
            class="shenhe-vertical-center-modal"
            footer-hide
            >
            <p>
                确认删除供应商{{name}}吗？删除后不可恢复！
            </p>
            <div class="btn-group" style="textalign: center; paddingtop: 20px">
                <Button
                type="primary"
                :loading="loading"
                style="marginleft: 20px;width:75px;height:35px;"
                @click="removePurchaseSupplierById(id)"
                >
                <Icon type="ios-checkmark" style="margin-right: 5px" />确认
                </Button>
                <Button style="marginleft: 20px;width:75px;height:35px;" @click="reviewYesStatus = false">
                <i
                    class="iconfont icon-butongyi"
                    style="font-size: 14px; margin-right: 5px"
                ></i
                >取消
                </Button>
            </div>
            </Modal>
    </div>
</template>

<script>
import api from "@/api/commonApi";
import newfourLevelLinkage from "@/components/newfourLevelLinkage";
import tablePlus from "@/components/tablePlus";
const filterObj = {
    provinceCode: null,
    cityCode: null,
    districtCode: null,
    name: '',
    enable: 'all'
}
const pagination  ={
    pageNo: 1,
    pageSize: 10,
    count: 0,
}
export default {
    components: {
        newfourLevelLinkage,
        tablePlus
    },
    data() {
        const that = this;
        return {
        reviewYesStatus: false,
        enableList: [
            {dictName: '未合作', dictValue: 0},
            {dictName: '合作中', dictValue: 1},
            {dictName: '取消合作', dictValue: 2}
        ],
        filterObj: { ...filterObj },
        pagination: { ...pagination },
        dataList: [],
        columns: [
            { type: 'sum', width: 80, align: 'center', title: '排序',
                render: (h, params) => {
                    let sum = (this.pagination.pageNo-1)*this.pagination.pageSize + params.index +1;
                    return h("span", sum);
                }
            },
            { key: 'name', title: '供应商名称', align: 'center',},
            { key: 'hosAddr', title: '地址', align: 'center'},
            { key: 'linkman', title: '联系人', align: 'center'},
            { key: 'linkmanTelephone', title: '联系电话', width: 180,align: 'center'},
            {
                key: 'enable', title: '合作状态', width: 130, align: 'center',render(h, params) {
                    return (that.enableList.filter(item => item.dictValue === params.row.enable)[0] || {}).dictName
                }
            },
            {
                key: '_operate', title: '设置', width: 160, align: 'center',render(h, params) {
                    const { id, name, enable } = params.row;
                    return h('div',[
                        h('span', {
                            props: {
                                type: 'primary',
                                size: 'small'
                            },
                            style: {
                                color: '#5362e1',
                                margin: "0px 6px"
                            },
                            on: {
                                click: () => {
                                    that.jumpTo('/index/drugfirmsmanage/procurement/supplier/edit/' + id);
                                }
                            }
                        }, '编辑'),
                        '|',
                        h('span', {
                            props: {
                                size: 'small'
                            },
                            style: {
                                color: '#21c780',
                                margin: "0px 6px"
                            },
                            on: {
                                click: () => {
                                    that.jumpTo('/index/drugfirmsmanage/procurement/supplier/review/' + id)
                                }
                            }
                        }, '详情'),
                        (params.row.enable == '0') ?
                        '|' : '',
                        (params.row.enable == '0') ?
                        h('span', {
                            props: {
                                type: 'error',
                                size: 'small'
                            },
                            style: {
                                color: '#fc6c49',
                                marginLeft: "6px"
                            },
                            on: {
                                click: () => {
                                    that.reviewYesStatus = true
                                    that.name = name
                                    that.id = id
                                    // that.$Modal.confirm({
                                    //     content: `确认删除供应商【${name}】吗？,删除后不可恢复！`,
                                    //     loading: true,
                                    //     onOk: () => {
                                    //         that.removePurchaseSupplierById(id);
                                    //     },
                                    // });
                                }
                            }
                        }, '删除') : null
                    ]);
                }
            },
        ],
        name:'',
        loading: false,
        }
    },
    created() {
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "",
                title: "采购管理"
            },
            {
                path: "/index/drugfirmsmanage/procurement/supplier/list",
                title: "供应商管理"
            }
        ];
        this.$emit("changeBreadList", breadList);
        // 初始化筛选状态
        const { pagination, filterObj } = this.$route.query;
        pagination && (this.pagination = JSON.parse(decodeURIComponent(pagination)));
        filterObj && (this.filterObj = JSON.parse(decodeURIComponent(filterObj)));
    },
    mounted() {
        this.findPurchaseSupplierListByPage();
    },
    methods: {
        handleSearch() {
            this.pagination.pageNo = 1;
            this.findPurchaseSupplierListByPage();
        },
        handleReset() {
            this.filterObj = { ...filterObj };
            this.pagination = { ...pagination };
            this.findPurchaseSupplierListByPage();
        },
        onChange(pageNo) {
            this.pagination.pageNo = pageNo
            this.findPurchaseSupplierListByPage();
        },
        addSupply() {
            this.jumpTo('/index/drugfirmsmanage/procurement/supplier/add');
        },
        jumpTo(path, query = {}) {
            this.$router.push({
                path,
                query: Object.assign({
                filterObj: encodeURIComponent(JSON.stringify(this.filterObj)),
                pagination: encodeURIComponent(JSON.stringify(this.pagination))
                }, query)
            });
        },
        findPurchaseSupplierListByPage() {
            const reqBody = {
                ...this.filterObj,
                pageNo: this.pagination.pageNo,
                pageSize: this.pagination.pageSize
            };
            if (reqBody.enable === 'all') {
                delete reqBody.enable;
            }
            console.log(JSON.stringify(reqBody));
            this.loading = true;
            this.$axios.post(api.getPurchaseSupplierInfoPage, reqBody).then(res => {
                if (res.data.code === 1) {
                    this.loading = false;
                    const { records, total, current } = res.data.object;
                    this.dataList = records;
                    this.pagination.count = total;
                    if (!this.dataList.length && (current !== 1)) {
                        this.pagination.pageNo = this.pagination.pageNo - 1;
                        this.findPurchaseSupplierListByPage();
                    }
                } else {
                    this.loading = false;
                    this.$Message.error(res.data.message);
                } 
                this.loading = false;
            });
        },
        removePurchaseSupplierById(id) {
            this.$axios.post(api.deletePurchaseSupplierById, {id}).then(res => {
                if (res.data.code === 1) {
                    this.$Message.success('操作成功');
                    this.reviewYesStatus = false 
                    this.findPurchaseSupplierListByPage();
                } else {
                    this.$Message.error(res.data.message);
                }
                // this.$Modal.remove();
            }).catch(() => {
                // this.$Modal.remove();
            });
        }
    },
    watch: {
    }
}
</script>

<style scoped lang="less">
.one{width:220px;}
.two{width:120px;}
.page-wrapper {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    margin: 0 auto;
}
    .margin-up-down {
        display: inline-block;
        margin-top: 10px;
    }
    .page{
      text-align: center;
      margin: 20px 0;
    }
    .filter-part {
        display: flex;
        flex-wrap: wrap;
        .filter-item {
            display: flex;
            margin: 10px 10px 10px 0;
            label {
                white-space: nowrap;
                line-height: 32px;
                padding-left: 5px;
                text-align: right;
            }
            .input {
                width: 220px;
            }
            .select {
                width: 70px;
            }
        }
    }
    .btn-group {
        padding: 20px 0;
        text-align: center;
    }
</style>